<template>
  <div class="wrapbox">
    <div class="sitebox">
      <p><span class="iconfont icon-weizhi1"></span> 自动定位:{{ site }}</p>
      <p>切换 <span class="iconfont icon-xiangyou"></span></p>
    </div>
    <div class="content">
      <ul class="listnav">
        <li v-for="(item, index) in newarr.listcity" :key="index">
          <img v-lazy="imgSrc[index]" />
          <p :class="{ on: item.distance > 5 }">
            <span class="iconfont icon-weizhi1"></span>{{ item.distance }}km
          </p>
          <div></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "../../../static/css/iconfont/iconfont.css";
export default {
  data() {
    return {
      site: "深圳",
      newarr: "",
      imgSrc: [
        require("./images/city_list1.png"),
        require("./images/city_list2.png"),
        require("./images/city_list3.png"),
        require("./images/city_list4.png"),
        require("./images/city_list5.png"),
        require("./images/city_list6.png"),
        require("./images/city_list7.png"),
        require("./images/city_list8.png"),
        require("./images/city_list9.png"),
        require("./images/city_list10.png"),
        require("./images/city_list11.png"),
        require("./images/city_list12.png"),
      ],
    };
  },
  mounted() {
    this.$axios.get("../../../static/data/city.json").then((res) => {
      this.newarr = res.data;
    });
  },
};
</script>
<style scoped lang="less">
li {
  list-style: none;
}
.wrapbox {
  width: 100%;
  overflow: hidden;
}
.sitebox {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 1vh 3vw;
  p {
    float: left;
    span {
      font-size: 16px;
    }
    &:last-child {
      float: right;
      span {
        font-size: 12px;
      }
    }
  }
}
.content{
  width: 100%;
  box-sizing: border-box;
  ul{
    width: 100%;
    padding: .05rem .3rem;
    box-sizing: border-box;
    li{
      width: 50%;
      float: left;
      position: relative;
      img{
        width: 100%;
      }
      p{
        position: absolute;
        left: .1rem;
        bottom: .05rem;
      }
      div{
        width: .3rem;
        height: .3rem;
        background: green;
        position: absolute;
        right: .2rem;
        bottom: .2rem;
        border-radius: 50%;
      }
    }
  }
}

</style>